<template>
  <div class="app-container" v-loading="loading">
    <left-device-info :source="deviceDeploymentInfo" :deviceId="deviceId" :ipAddress="ipAddress"/>
    <div class="right-wrap">
      <el-tabs
        ref="tab"
        v-model="activeTab"
        stretch
        type="border-card"
        style="min-height: inherit"
      >
        <el-tab-pane
          v-for="item in tabList"
          :key="item.key"
          :label="item.name"
          :name="item.key"
          lazy
        >
          <model-info
            v-if="item.key === '1'"
            :deviceId="deviceId"
          />
          <device-run-parameter
            :deviceId="deviceId"
            v-if="item.key === '2'"
          />
          <device-config-info
            v-if="item.key === '3'"
            :deviceCode="deviceDeploymentInfo.deviceCode"
          />
          <device-detail-info
            v-if="item.key === '4'"
            :deviceDetailInfoForm="deviceDeploymentInfo"
          />
          <work-order-list
            v-if="item.key === '5'"
            :source="deviceDeploymentInfo"
          />
          <device-fix-record
            v-if="item.key === '6'"
            :deviceId="deviceId"
          />
          <fault-log
            v-if="item.key === '7'"
            :deviceId="deviceId"
            :deviceDeploymentInfo="deviceDeploymentInfo"
          />
          <remote-instruction
            v-if="item.key === '8'"
            :source="deviceDeploymentInfo"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import LeftDeviceInfo from './components/leftDeviceInfo'
import DeviceDetailInfo from '@/views/device/placeManager/components/deviceDetailInfo'
import ModelInfo from './components/modelInfo'
import DeviceRunParameter from './components/deviceRunParameter'
import DeviceConfigInfo from './components/deviceConfigInfo'
import WorkOrderList from './components/workOrderList'
import deviceFixRecord from './components/deviceFixRecord'
import FaultLog from './components/faultLog'
import RemoteInstruction from './components/remoteInstruction'
import {reqDeploymentByDeviceId} from '@/api/operationAndMonitoring/deviceMonitoring'

export default {
  name: "DeviceMonitoringDetail",
  components: {
    DeviceDetailInfo,
    ModelInfo,
    DeviceRunParameter,
    DeviceConfigInfo,
    WorkOrderList,
    deviceFixRecord,
    FaultLog,
    RemoteInstruction,
    LeftDeviceInfo
  },
  data() {
    return {
      activeTab: '1',
      tabList: [
        {name: '外设模块状态', key: '1'},
        {name: '设备运行参数', key: '2'},
        {name: '设备配置信息', key: '3'},
        {name: '设备部署信息', key: '4'},
        {name: '设备工单', key: '5'},
        {name: '设备维修记录', key: '6'},
        {name: '设备异常日志', key: '7'},
        {name: '远程操作指令', key: '8'},
      ],
      deviceDeploymentInfo: {},
      loading: false,
      deviceId: '',
      ipAddress:''
    }
  },

  methods: {
    async getDeviceDeploymentInfo(){
      try {
        this.loading = true;
        const res = await reqDeploymentByDeviceId({
          deviceId: this.deviceId,
          ipAddress: this.ipAddress
        });
        this.deviceDeploymentInfo = res.data
        // this.ipAddress = res.ipAddress

      } catch (err) {
        console.log("reqDeploymentByDeviceId 接口数据异常", err)
      } finally {
        this.loading = false;
      }
    }
  },

  created() {
    const { deviceId, ipAddress } = this.$route.query;
    this.deviceId = deviceId;
    this.ipAddress = ipAddress
    this.getDeviceDeploymentInfo();
  },
}
</script>

<style lang="scss" scoped>
.app-container {
  display: flex;
  min-height: inherit;
  background: #eef0f3;
  overflow: auto;

  .right-wrap {
    flex: 1 0;
    min-width: 800px;
    min-height: 100%;
    border: 1px solid #e6ebf5;
    background: #fff;
  }
}

::v-deep .el-tabs__item {
  height: 44px;
  line-height: 44px;
  font-size: 15px;
}

.el-tabs--border-card {
  box-shadow: none;
}
</style>
